<template>
	<div class="container">
		<h1>Welcome to Interactive Map!!</h1>
		<div class="content">
			<div class="mapContainer" id="mapContainer"></div>
		</div>
	</div>
</template>

<style scoped>
.mapContainer {
	width: 95%;
	height: 800px;
	margin: 40px auto;
	margin-top: 0px;
	cursor: pointer;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.container {
	width: 100%;
	background-color: whitesmoke;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 20px;
}

.content {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}
</style>

<script lang="ts" setup>
import { reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader"; // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误

const state = reactive({
	path: [],
	current_position: [],
});

//进行地图初始化
function initMap() {
	AMapLoader.load({
		key: "5a19088d1fb8c4c662785dc5f9294691", // 申请好的Web端开发者Key，首次调用 load 时必填
		version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
	})
		.then((AMap) => {
			const map = new AMap.Map("mapContainer", {
				//设置地图容器id
				viewMode: "3D", //是否为3D地图模式
				zoom: 10, //初始化地图级别
				center: [120.374926, 30.310678], //初始化地图中心点位置
			});
			//添加插件
			AMap.plugin(["AMap.ToolBar", "AMap.Scale", "AMap.HawkEye"], function () {
				//异步同时加载多个插件
				map.addControl(new AMap.HawkEye()); //显示缩略图
				map.addControl(new AMap.Scale()); //显示当前地图中心的比例尺
			});
			// 单击
			map.on("click", (e) => {
				// console.log(e);
				// state.current_position = [e.lnglat.KL, e.lnglat.kT];
				// state.path.push([e.lnglat.KL, e.lnglat.kT]);
				addMarker();

				addPolyLine();
				// 地图按照适合展示图层内数据的缩放等级展示
				// map.setFitView();
			});

			// 实例化点标记
			function addMarker() {
				const marker = new AMap.Marker({
					icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
					position: state.current_position,
					offset: new AMap.Pixel(-26, -54),
				});
				marker.setMap(map);
			}

			// 折线
			function addPolyLine() {
				const polyline = new AMap.Polyline({
					path: state.path,
					isOutline: true,
					outlineColor: "#ffeeff",
					borderWeight: 1,
					strokeColor: "#3366FF",
					strokeOpacity: 0.6,
					strokeWeight: 5,
					// 折线样式还支持 'dashed'
					strokeStyle: "solid",
					// strokeStyle是dashed时有效
					// strokeDasharray: [10, 5],
					lineJoin: "round",
					lineCap: "round",
					zIndex: 50,
				});
				map.add([polyline]);
			}
		})
		.catch((e) => {
			console.log(e);
		});
}
initMap();
</script>
